'use client';

import { observer } from 'mobx-react-lite';
import { useState } from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { ImageIcon } from '@/icons';
import { components } from '@/lib/gen';
import logWebUserEvent from '@/logging/logWebUserEvent';

type ArtistProfileInfoSchema = components['schemas']['ArtistProfileInfoSchema'];

interface ProfileCoverSectionProps {
  coverImage: string;
  session: any;
  profile: any;
  artistProfileInfo: ArtistProfileInfoSchema | null;
  onOpenEditProfile: () => void;
  children: React.ReactNode;
}

const ProfileCoverSection = observer(
  ({
    coverImage,
    session,
    profile,
    artistProfileInfo,
    onOpenEditProfile,
    children,
  }: ProfileCoverSectionProps) => {
    const [isHoveringCoverSection, setIsHoveringCoverSection] = useState(false);

    return (
      <div
        className='relative min-h-[500px] w-full md:min-h-[332px]'
        {...(session.user?.id === profile?.user_id && {
          onMouseEnter: () => setIsHoveringCoverSection(true),
          onMouseLeave: () => setIsHoveringCoverSection(false),
        })}
      >
        <div
          className='absolute inset-0 bg-cover bg-center'
          style={{ backgroundImage: `url(${coverImage})` }}
        ></div>
        <div className='absolute inset-0 bg-linear-to-b from-transparent from-20% to-[#101012] to-60% md:from-0% md:via-black/20 md:to-[#101012] md:to-100%'></div>

        {session.user?.id === profile?.user_id && isHoveringCoverSection && (
          <Button
            onClick={() => {
              const hasExistingCover = !!artistProfileInfo?.cover_photo_url;

              logWebUserEvent(
                {
                  actionName: 'ArtistProfileCoverImageButtonClicked',
                  context: {
                    action: hasExistingCover ? 'replace' : 'add',
                  },
                },
                session
              );

              onOpenEditProfile();
            }}
            iconStart={<ImageIcon />}
            size={ButtonSize.Medium}
            variant={ButtonVariant.Glass}
            shape={ButtonShape.Pill}
            className='absolute top-[calc(50%-50px)] left-1/2 z-100 hidden -translate-x-1/2 -translate-y-1/2 transform cursor-pointer bg-[rgba(255,255,255,0.10)] p-[12px] backdrop-blur-lg hover:bg-[rgba(255,255,255,0.15)] md:flex'
          >
            {artistProfileInfo?.cover_photo_url ? 'Replace Image' : 'Add Image'}
          </Button>
        )}

        {children}
      </div>
    );
  }
);

export default ProfileCoverSection;